<template>
  <div v-for="(q, index) in questions" :key="q.id" class="question-card">
    <h3>题目 {{ index + 1 }}</h3>
    <div v-html="renderMath(q.content)"></div>
    <div class="options">
      <div
        v-for="(option, idx) in q.options"
        :key="idx"
        :class="['option', {
          'correct': isCorrect(q, idx),
          'wrong': isWrong(q, idx)
        }]"
        @click="selectOption(q, idx)"
      >
        {{ optionKey[idx] }}.
        <span v-html="renderMath(option)"></span>
      </div>
    </div>
    <details>
      <summary>查看解析</summary>
      <div v-html="renderMath(q.explanation)"></div>
    </details>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import katex from 'katex';
import 'katex/dist/katex.min.css';
const fakeQuestions = [
  {
    "id": 1,
    "content": "设矩阵 $ A = \\begin{bmatrix} 2 & 1 & 0 \\\\ 0 & 2 & 1 \\\\ 0 & 0 & 2 \\end{bmatrix} $，求其 Jordan 标准型，并验证是否存在可逆矩阵 $ P $ 使得 $ P^{-1}AP = J $。",
    "options": [
      "$ J = \\begin{bmatrix} 2 & 1 & 0 \\\\ 0 & 2 & 1 \\\\ 0 & 0 & 2 \\end{bmatrix}, P = \\begin{bmatrix} 1 & 0 & 0 \\\\ 0 & 1 & 0 \\\\ 0 & 0 & 1 \\end{bmatrix} $",
      "$ J = \\begin{bmatrix} 2 & 1 & 0 \\\\ 0 & 2 & 1 \\\\ 0 & 0 & 2 \\end{bmatrix}, P = \\begin{bmatrix} 1 & 1 & 0 \\\\ 0 & 1 & 1 \\\\ 0 & 0 & 1 \\end{bmatrix} $",
      "$ J = \\begin{bmatrix} 2 & 0 & 0 \\\\ 0 & 2 & 0 \\\\ 0 & 0 & 2 \\end{bmatrix}, P = \\begin{bmatrix} 1 & 0 & 0 \\\\ 0 & 1 & 0 \\\\ 0 & 0 & 1 \\end{bmatrix} $",
      "$ J = \\begin{bmatrix} 2 & 1 & 0 \\\\ 0 & 2 & 0 \\\\ 0 & 0 & 2 \\end{bmatrix}, P = \\begin{bmatrix} 1 & 0 & 0 \\\\ 0 & 1 & 0 \\\\ 0 & 0 & 1 \\end{bmatrix} $"
    ],
    "answer": 1,
    "explanation": "该矩阵已经是 Jordan 标准型，因为其特征值为 2（代数重数 3），几何重数为 1。构造 $ P $ 时需满足广义特征向量条件。"
  },
  {
    "id": 2,
    "content": "计算定积分 $$ I = \\int_0^\\infty \\frac{x^3}{e^x - 1} \\, dx $$。",
    "options": [
      "$ \\frac{\\pi^4}{15} $",
      "$ \\frac{\\pi^2}{6} $",
      "$ \\frac{\\pi^4}{90} $",
      "$ \\frac{\\pi^2}{12} $"
    ],
    "answer": 0,
    "explanation": "通过变量替换和黎曼 zeta 函数展开，得到结果为 $ \\zeta(4) \\cdot \\Gamma(4) = \\frac{\\pi^4}{15} $。"
  },
  {
    "id": 3,
    "content": "设 $ f(x) $ 是定义在 $[0, 1]$ 上的连续函数，且满足 $$ \\int_0^1 f(x) \\, dx = 0 $$ 和 $$ \\int_0^1 x f(x) \\, dx = 1 $$。证明存在 $ c \\in (0, 1) $，使得 $ f(c) = 0 $。",
    "options": [
      "利用中值定理直接证明。",
      "构造辅助函数 $ g(x) = \\int_0^x f(t) \\, dt $ 并应用罗尔定理。",
      "通过反证法假设 $ f(x) > 0 $ 或 $ f(x) < 0 $ 恒成立。",
      "无法证明，题目条件不足。"
    ],
    "answer": 1,
    "explanation": "构造辅助函数 $ g(x) = \\int_0^x f(t) \\, dt $，满足 $ g(0) = g(1) = 0 $，由罗尔定理可知存在 $ c \\in (0, 1) $ 使得 $ g'(c) = f(c) = 0 $。"
  },
  {
    "id": 4,
    "content": "一个质量为 $ m $ 的粒子在势场 $ V(x) = \\frac{1}{2}kx^2 $ 中运动，其初始位置和速度分别为 $ x_0 $ 和 $ v_0 $。求粒子的运动轨迹 $ x(t) $。",
    "options": [
      "$ x(t) = x_0 \\cos(\\omega t) + \\frac{v_0}{\\omega} \\sin(\\omega t), \\, \\omega = \\sqrt{k/m} $",
      "$ x(t) = x_0 e^{-\\gamma t} \\cos(\\omega t), \\, \\omega = \\sqrt{k/m - \\gamma^2} $",
      "$ x(t) = x_0 + v_0 t - \\frac{1}{2} \\frac{k}{m} t^2 $",
      "$ x(t) = x_0 \\sin(\\omega t) + \\frac{v_0}{\\omega} \\cos(\\omega t), \\, \\omega = \\sqrt{k/m} $"
    ],
    "answer": 0,
    "explanation": "这是简谐振子问题，解为 $ x(t) = x_0 \\cos(\\omega t) + \\frac{v_0}{\\omega} \\sin(\\omega t) $，其中 $ \\omega = \\sqrt{k/m} $。"
  },
  {
    "id": 5,
    "content": "设随机变量 $ X $ 服从正态分布 $ N(0, 1) $，求 $ Y = X^2 $ 的概率密度函数。",
    "options": [
      "$ f_Y(y) = \\frac{1}{\\sqrt{2\\pi y}} e^{-y/2}, \\, y > 0 $",
      "$ f_Y(y) = \\frac{1}{2\\sqrt{y}} e^{-y/2}, \\, y > 0 $",
      "$ f_Y(y) = \\frac{1}{\\sqrt{2\\pi}} e^{-y/2}, \\, y > 0 $",
      "$ f_Y(y) = \\frac{1}{\\sqrt{y}} e^{-y/2}, \\, y > 0 $"
    ],
    "answer": 0,
    "explanation": "利用变量变换公式 $ f_Y(y) = f_X(g^{-1}(y)) \\cdot \\left| \\frac{d}{dy} g^{-1}(y) \\right| $，其中 $ g(x) = x^2 $，得到结果。"
  },
  {
    "id": 6,
    "content": "设 $ G $ 是一个有限群，且 $ |G| = p^n $，其中 $ p $ 是素数。证明 $ G $ 中至少存在一个正规子群 $ H $，使得 $ |H| = p^{n-1} $。",
    "options": [
      "利用 Sylow 定理直接证明。",
      "通过群作用和轨道稳定子定理构造子群。",
      "利用归纳法和群中心非平凡性证明。",
      "无法证明，题目条件不足。"
    ],
    "answer": 2,
    "explanation": "根据群中心非平凡性，有限 p-群的中心 $ Z(G) $ 非平凡，结合归纳法可以构造出 $ |H| = p^{n-1} $ 的正规子群。"
  },
  {
    "id": 7,
    "content": "设 $ u(x, t) $ 是热传导方程 $$ \\frac{\\partial u}{\\partial t} = k \\frac{\\partial^2 u}{\\partial x^2} $$ 的解，初始条件为 $ u(x, 0) = f(x) $。求解 $ u(x, t) $ 的表达式。",
    "options": [
      "$ u(x, t) = \\frac{1}{\\sqrt{4\\pi kt}} \\int_{-\\infty}^\\infty f(\\xi) e^{-\\frac{(x-\\xi)^2}{4kt}} \\, d\\xi $",
      "$ u(x, t) = \\frac{1}{2\\sqrt{\\pi kt}} \\int_{-\\infty}^\\infty f(\\xi) e^{-\\frac{(x-\\xi)^2}{2kt}} \\, d\\xi $",
      "$ u(x, t) = \\frac{1}{\\sqrt{2\\pi kt}} \\int_{-\\infty}^\\infty f(\\xi) e^{-\\frac{(x-\\xi)^2}{kt}} \\, d\\xi $",
      "$ u(x, t) = \\frac{1}{\\sqrt{\\pi kt}} \\int_{-\\infty}^\\infty f(\\xi) e^{-\\frac{(x-\\xi)^2}{kt}} \\, d\\xi $"
    ],
    "answer": 0,
    "explanation": "热传导方程的解可以通过傅里叶变换得到，结果为热核形式。"
  },
  {
    "id": 8,
    "content": "设 $ f(x) $ 是定义在 $[0, 1]$ 上的连续函数，且满足 $$ \\int_0^1 f(x) \\, dx = 1 $$ 和 $$ \\int_0^1 x f(x) \\, dx = \\frac{1}{2} $$。求 $ f(x) $ 的最大值。",
    "options": [
      "$ f(x) = 2 $",
      "$ f(x) = 1 $",
      "$ f(x) = 3 $",
      "$ f(x) = 4 $"
    ],
    "answer": 0,
    "explanation": "通过约束条件和变分法分析，$ f(x) = 2 $ 是满足条件的最大值。"
  }
];
const questions = ref([]);
const optionKey = ['A', 'B', 'C', 'D'];

// 判断是否正确
const isCorrect = (q, idx) => q.selected === idx && q.answer === idx;

// 判断是否错误
const isWrong = (q, idx) => q.selected === idx && q.answer !== idx;

// 选择选项
const selectOption = (q, idx) => {
  q.selected = idx;
};

// 加载题目
const fetchQuestions = async () => {
  questions.value = fakeQuestions.map(q => ({ ...q, selected: null }));
};

// 渲染数学公式
const renderMath = (text) => {
  if (!text) return '';

  // 匹配行内公式 $...$
  let result = text.replace(/\$(.*?)\$/g, (_, m) =>
    katex.renderToString(m.trim(), {
      throwOnError: false,
      strict: false
    }));

  // 匹配块级公式 $$...$$
  result = result.replace(/\\$\$(.*?)\\$\$/gs, (_, m) =>
    katex.renderToString(m.trim(), {
      displayMode: true,
      throwOnError: false,
      strict: false
    }));

  return result;
};

onMounted(fetchQuestions);
</script>

<style scoped>
.question-card {
  margin: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.options {
  margin: 15px 0;
}

.option {
  padding: 8px 12px;
  margin: 5px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.option:hover {
  background-color: #f5f5f5;
}

.option.correct {
  background-color: #e6f7e6;
  border-color: #a3e8a3;
}

.option.wrong {
  background-color: #ffebeb;
  border-color: #ffb3b3;
}

details {
  margin-top: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}
</style>
